<template>
  <div>
    <el-form ref="searchForm" :inline="true" :model="searchMap" class="item">
      <el-form-item class="items1" prop="pid">
        <el-input v-model="searchMap.pid" placeholder="进货单编号"></el-input>
      </el-form-item>
      <el-form-item class="items2" prop="psid">
        <el-input v-model="searchMap.psid" placeholder="供应商编号"></el-input>
      </el-form-item>
      <el-form-item class="items3" prop="pename">
        <el-input v-model="searchMap.pename" placeholder="负责人"></el-input>
      </el-form-item>
      <el-form-item class="items4" prop="psmaterial">
        <el-input
          v-model="searchMap.psmaterial"
          placeholder="原材料"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <button type="primary" @click="fetchData" class="buttons1">查询</button>
        <button @click="resetForm('searchForm')" class="buttons2">重置</button>
        <button @click="dialogFormVisible = true" class="buttons3">新增</button>
      </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%; font-size: 2px">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item>
              <span>进货单编号：</span>
              <span>{{ props.row.pid }}</span>
            </el-form-item>
            <el-form-item>
              <span>负责人：</span>
              <span>{{ props.row.pename }}</span>
            </el-form-item>
            <el-form-item>
              <span>供应商编号：</span>
              <span>{{ props.row.psid }}</span>
            </el-form-item>
            <el-form-item>
              <span>原材料：</span>
              <span>{{ props.row.psmaterial }}</span>
            </el-form-item>
            <el-form-item>
              <span>单价：</span>
              <span>{{ props.row.pprice }}元/个</span>
            </el-form-item>
            <el-form-item>
              <span>数量：</span>
              <span>{{ props.row.pcounts }}个</span>
            </el-form-item>
            <el-form-item>
              <span>总金额：</span>
              <span>{{ props.row.pmoney }}元</span>
            </el-form-item>
            <el-form-item>
              <span>执行时间：</span>
              <span>{{ props.row.ptime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index"> </el-table-column>
      <el-table-column label="进货单编号" prop="pid"> </el-table-column>
      <el-table-column label="负责人" prop="pename"> </el-table-column>
      <el-table-column label="原材料" prop="psmaterial"> </el-table-column>
      <el-table-column label="执行时间" prop="ptime" width="200"> </el-table-column>
    </el-table>

    <el-dialog title="新增进货单" width="460px" :visible.sync="dialogFormVisible">
      <el-form
        ref="pojo"
        :rules="rules"
        label-width="100px"
        label-position="right"
        style="width: 400px"
        :model="pojo"
      >
        <el-form-item label="原材料" prop="psid" style="height: 36px">
          <el-select v-model="pojo.psid" placeholder="请选择原材料">
            <el-option
            v-for="option in suppliers"
            :key="option.sid"
            :label="option.smaterial"
            :value="option.sid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="peid" style="height: 36px">
          <el-select v-model="pojo.peid" placeholder="请选择负责人">
            <el-option
            v-for="option in staffs"
            :key="option.eid"
            :label="option.ename"
            :value="option.eid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购数量" prop="pcounts" style="height: 10px">
          <el-input v-model="pojo.pcounts" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOnePurchase('pojo')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import purchaseApi from "@/api/purchase";
import suppliersApi from "@/api/supplier";
import staffsApi from "@/api/staff";
export default {
  data() {
    return {
      list: [],
      suppliers:[],
      staffs:[],
      searchMap: {
        pid: "",
        psid: "",
        pename: "",
        psmaterial: "",
      },
      dialogFormVisible: false,
      pojo: {
        psid: '',
        peid: '',
        pcounts: ''
      },
      rules: {
        psid: [{ required: true, message: "供应商不能为空", trigger: "blur" }],
        peid: [{ required: true, message: "负责人不能为空", trigger: "blur" }],
        pcounts: [{ required: true, message: "采购数量不能为空", trigger: "blur" }],
      },

    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      staffsApi.getAllStaffsMessage().then((response) => {
        this.staffs = response.data;
      });
      suppliersApi.getAllSuppliersMessage().then((response) => {
        this.suppliers = response.data;
      });
      purchaseApi.search(this.searchMap).then((response) => {
        this.list = response.data;
      });
    },
    resetForm(fromName) {
      this.$refs[fromName].resetFields();
      this.fetchData();
    },
    addOnePurchase(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          purchaseApi.addOnePurchase(this.pojo).then((response) => {
            console.log(response.data);
            this.fetchData();
            this.dialogFormVisible = false
          });
        } else {

        }
      });
    },
  },
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
span {
  font-family: "华文隶书";
}
.item {
  height: 46px;
}
.items1 {
  width: 140px;
}
.items2 {
  width: 140px;
}
.items3 {
  width: 110px;
}
.items4 {
  width: 100px;
}
.buttons1 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  background: #409eff;
  border-radius: 4px;
  border: white;
}
.buttons2 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  border-radius: 4px;
  background: #a5ada6;
  border: white;
}
.buttons3 {
  width: 50px;
  height: 30px;
  margin-right: 0px;
  background: #40ff60;
  border-radius: 4px;
  border: white;
}
</style>